<template>
  <div>
    <i class="pi pi-spin pi-spinner text-[120px]" v-if="loading" />
    <img :src="qrCodeUrl" alt="QRCode" v-else />
  </div>
</template>

<script setup>
import QRCode from 'qrcode';

const props = defineProps({
  value: {
    type: String,
    required: false,
    default: () => ({})
  },
  size: {
    type: Number,
    required: false,
    default: 200
  },
  color: {
    type: String,
    required: false,
    default: '#000000'
  },
  loading: {
    type: Boolean,
    required: false,
    default: false
  }
});
const qrCodeUrl = ref('');
watch(
  () => props.value,
  async () => {
    const text = props.value; // 要生成二维码的文本
    try {
      const dataUrl = await QRCode.toDataURL(text, {
        errorCorrectionLevel: 'H',
        width: '100%',
        'color.dark': props.color
      });
      qrCodeUrl.value = dataUrl;
    } catch (error) {
      console.error('Failed to generate QR Code', error);
    }
  },
  { deep: true }
);
onMounted(async () => {
  const text = props.value; // 要生成二维码的文本
  try {
    const dataUrl = await QRCode.toDataURL(text, {
      errorCorrectionLevel: 'H',
      width: '100%',
      'color.dark': props.color
    });
    qrCodeUrl.value = dataUrl;
  } catch (error) {
    console.error('Failed to generate QR Code', error);
  }
});
</script>
